<!--
PivotalMySQLWeb

Copyright (c) 2017-Present Pivotal Software, Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>Pivotal MySQL*Web - SQL*Worksheet</title>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" th:href="@{'themes/' + ${session.themeMain}}" media="screen" />
    <link rel="stylesheet" th:href="@{'themes/' + ${session.themeMin}}" />

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>

    <link href="https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet" />
    <script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>

    <script th:src="@{js/functions.js}" type="text/javascript"></script>
    <script th:src="@{edit_area/edit_area_full.js}" type="text/javascript"></script>

    <script language="Javascript" type="text/javascript">
        // initialisation
        editAreaLoader.init({
            id: "query"	// id of the textarea to transform
            ,start_highlight: true
            ,allow_toggle: false
            ,allow_resize: "y"
            ,language: "en"
            ,syntax: "sql"
            ,toolbar: "search, go_to_line, |, undo, redo, |, select_font, |, highlight"
            ,syntax_selection_allow: "sql"
            ,is_multi_files: false
            ,resize: true
            ,show_line_colors: true
        });
    </script>

    <script>
        function enableLoad() {
            document.getElementById("load_button").disabled=false;
        }
    </script>

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('#datatable-mysql').DataTable();
        } );
    </script>

    <style>
        .navbar-brand
        {
            position: absolute;
            width: 100%;
            left: 0;
            margin: auto;
            margin-left: 48%;
        }
    </style>
</head>
<body>

<div class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-brand navbar-left">
                <a href="#">
                    <img src="images/PVLG-PivotalMYSQLWeb-SM.png"
                         th:src="@{images/PVLG-PivotalMYSQLWeb-SM.png}"
                         alt="Brand" />
                </a>
            </div>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right nav-pills">
                <li>
                    <a th:href="@{/home}">
                        <img src="images/b_home.png"
                             th:src="@{images/b_home.png}"
                             alt="Home"
                             border="0"/>
                        Home
                    </a>
                </li>
                <li>
                    <a th:href="@{/exit}">
                        <img src="images/s_loggoff.png"
                             th:src="@{images/s_loggoff.png}"
                             alt="Logout"
                             border="0"/>
                        Logout
                    </a>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Menu <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a th:href="@{/prefs}">
                                <img src="images/b_props.png"
                                     th:src="@{images/b_props.png}"
                                     alt="Preferences"
                                     border="0"/>
                                Preferences
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/endpoints}">
                                <img src="images/s_notice.png"
                                     th:src="@{images/s_notice.png}"
                                     alt="Endpoints"
                                     border="0"/>
                                Heath Endpoints
                            </a>
                        </li>
                        <li>
                            <a href="http://docs.pivotal.io/p-mysql/1-7/" target="_new">
                                <img src="images/b_docs.png"
                                     th:src="@{images/b_docs.png}"
                                     alt="p-mysql docs"
                                     border="0"/>
                                p-mysql Doc
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a th:href="@{/refresh}">
                                <img src="images/eye.png"
                                     th:src="@{images/eye.png}"
                                     alt="Refresh"
                                     border="0"/>
                                Refresh
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Schema Objects <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a th:href="@{/tables}">
                                <img src="images/s_tbl.png"
                                     th:src="@{images/s_tbl.png}"
                                     alt="Tables"
                                     border="0"/>
                                Tables[<span th:text="${session.schemaMap.Table}" />]
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/views}">
                                <img src="images/b_views.png"
                                     th:src="@{images/b_views.png}"
                                     alt="Views"
                                     border="0"/>
                                Views[<span th:text="${session.schemaMap.View}" />]
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/indexes}">
                                <img src="images/b_index.png"
                                     th:src="@{images/b_index.png}"
                                     alt="Indexes"
                                     border="0"/>
                                Indexes[<span th:text="${session.schemaMap.Index}" />]
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/constraints}">
                                <img src="images/constraints.png"
                                     th:src="@{images/constraints.png}"
                                     alt="Constraints"
                                     border="0"/>
                                Constraints[<span th:text="${session.schemaMap.Constraint}" />]
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a th:href="@{/query}">
                                <img src="images/b_sql.png"
                                     th:src="@{images/b_sql.png}"
                                     alt="SQL Worksheet"
                                     border="0"/>
                                SQL Worksheet
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Themes <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a th:href="@{/selecttheme(theme='default')}">Default</a></li>
                        <li><a th:href="@{/selecttheme(theme='sandstone')}">Sandstone</a></li>
                        <li><a th:href="@{/selecttheme(theme='cyborg')}">Cyborg</a></li>
                        <li><a th:href="@{/selecttheme(theme='slate')}">Slate</a></li>
                        <li><a th:href="@{/selecttheme(theme='spacelab')}">Spacelab</a></li>
                    </ul>
                </li>
                <li class="dropdown" th:if="${session.servicesListSize > 0}">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Instances <b class="caret"></b></a>
                    <ul class="dropdown-menu" style="min-width: 300px;">
                        <div th:each="service : ${session.servicesList}">
                            <li><a th:href="@{/switchinstance(instanceType=${service.type},instanceName=${service.name})}">Switch to <span th:text="${service.name}" /></a></li>
                        </div>
                    </ul>
                </li>
                <li>
                    <a href="#">
                        <img src="images/b_usrlist.png"
                             th:src="@{images/b_usrlist.png}"
                             alt="Users"
                             border="0"/>
                        [User: <span th:text="${session.user} ? ${session.user} : 'Not Logged In'">Not Logged In</span>]
                    </a>
                </li>
            </ul>
        </div>

    </div>
</div>
<!-- NAVBAR CODE END -->

<div class="bs-example">
    <div class="page-header">
        <h1>Pivotal MySQL*Web - <small>SQL*Worksheet</small></h1>
    </div>
</div>

<ul class="nav nav-tabs">
    <li>
        <a th:href="@{/home}">
            <img src="images/b_home.png"
                 th:src="@{images/b_home.png}"
                 alt="Home"
                 border="0"/>
            Home
        </a>
    </li>
    <li>
        <a th:href="@{/tables}">
            <img src="images/s_tbl.png"
                 th:src="@{images/s_tbl.png}"
                 alt="Tables"
                 border="0"/>
            Tables[<span th:text="${session.schemaMap.Table}" />]
        </a>
    </li>
    <li>
        <a th:href="@{/views}">
            <img src="images/b_views.png"
                 th:src="@{images/b_views.png}"
                 alt="Views"
                 border="0"/>
            Views[<span th:text="${session.schemaMap.View}" />]
        </a>
    </li>
    <li>
        <a th:href="@{/indexes}">
            <img src="images/b_index.png"
                 th:src="@{images/b_index.png}"
                 alt="Views"
                 border="0"/>
            Indexes[<span th:text="${session.schemaMap.Index}" />]
        </a>
    </li>
    <li>
        <a th:href="@{/constraints}">
            <img src="images/constraints.png"
                 th:src="@{images/constraints.png}"
                 alt="Constraints"
                 border="0"/>
            Constraints[<span th:text="${session.schemaMap.Constraint}" />]
        </a>
    </li>
    <li class="active">
        <a th:href="@{/query}">
            <img src="images/b_sql.png"
                 th:src="@{images/b_sql.png}"
                 alt="SQL Worksheet"
                 border="0"/>
            SQL Worksheet
        </a>
    </li>
    <li>
        <a th:href="@{/viewconmap}">
            <img src="images/Connection.gif"
                 th:src="@{images/Connection.gif}"
                 alt="View Connections"
                 border="0"/>
            Connections
        </a>
    </li>
    <li>
        <a th:href="@{/endpoints}">
            <img src="images/s_notice.png"
                 th:src="@{images/s_notice.png}"
                 alt="Endpoints"
                 border="0"/>
            Endpoints
        </a>
    </li>
    <li>
        <a th:href="@{/userinfo}">
            <img src="images/s_info.png"
                 th:src="@{images/s_info.png}"
                 alt="Information"
                 border="0"/>
            Information
        </a>
    </li>
    <li>
        <a th:href="@{/variables}">
            <img src="images/s_vars.png"
                 th:src="@{images/s_vars.png}"
                 alt="Database Variables"
                 border="0"/>
            Variables
        </a>
    </li>
</ul>

<div th:if="${sqlfile != null}">
    <div class="bs-example">
        <div class="alert alert-success fade in">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <strong>Success!</strong> Loaded <strong th:text="${sqlfile}"></strong>
        </div>
    </div>
</div>

<div class="col-xs-12" th:if="${explainresult != null}">
    <h3>Explain Result</h3>
    <div class="bs-example">
        <div class="alert alert-success fade in">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <strong>Success!</strong> Explain Plan Completed successfully
        </div>
    </div>
    <table class="table table-hover table-bordered table-striped table-condensed">
        <thead>
        <div th:each="columnName : ${explainresult.columnNames}">
            <th style="text-align:center"><span th:text="${columnName}"/></th>
        </div>
        </thead>
        <tbody>
        <div th:each="rows : ${explainresult.rows}">
            <tr>
                <div th:each="columnName : ${explainresult.columnNames}">
                    <td style="text-align:center"><span th:text="${rows.get(columnName)}"/></td>
                </div>
            </tr>
        </div>
        </tbody>
    </table>
    <br />
</div>

<div>
    <br />
    <form th:action="@{/uploadsql}" method="post" class="form-horizontal" enctype="multipart/form-data" onsubmit="return checkFile();">
        <div class="form-group">
            <div class="col-xs-8">
                <label class="btn btn-primary">
                    Browse SQL File&hellip; <input type="file" name="file" style="display: none" onchange="enableLoad()" />
                </label>
                <button id="load_button" type="submit" class="btn btn-primary" disabled="disabled">Load</button>
                &nbsp; Use Browse SQL File button to enable load of SQL File
            </div>
        </div>
    </form>
</div>

<br />
<div class="bs-example">
    <form th:action="@{/query}" method="post" class="form-horizontal">
        <div class="form-group">
            <div class="col-xs-12">
                <a th:href="@{/query(action=commit)}">
                    <img src="images/commit.png"
                         th:src="@{images/commit.png}"
                         alt="Commit"
                         data-toggle="tooltip" title="Commit Current Transaction"
                         border="0"/>
                    Commit
                </a>&nbsp;
                <a th:href="@{/query(action=rollback)}">
                    <img src="images/rollback.png"
                         th:src="@{images/rollback.png}"
                         alt="Rollback"
                         data-toggle="tooltip" title="Rollback Current Transaction"
                         border="0"/>
                    Rollback
                </a>&nbsp;&nbsp;
                <a th:href="@{/history}">
                    <img src="images/b_props.png"
                         th:src="@{images/b_props.png}"
                         alt="History"
                         data-toggle="tooltip" title="View Successful Command History"
                         border="0"/>
                    History
                </a>&nbsp;&nbsp;
                <div class="col-xs-1">
                    Query Count:
                </div>
                <div class="col-xs-1">
                    <select id="queryCount" name="queryCount" class="form-control">
                        <div th:switch="${queryCount}">
                            <div th:case="'N'">
                                <option value="N" selected="selected">No</option>
                                <option value="Y">Yes</option>
                            </div>
                            <div th:case="'Y'">
                                <option value="N">No</option>
                                <option value="Y" selected="selected">Yes</option>
                            </div>
                        </div>
                    </select>
                </div>
                <div class="col-xs-1">
                    Elapsed Time:
                </div>
                <div class="col-xs-1">
                    <select id="elapsedTime" name="elapsedTime" class="form-control">
                        <div th:switch="${elapsedTime}">
                            <div th:case="'N'">
                                <option value="N" selected="selected">No</option>
                                <option value="Y">Yes</option>
                            </div>
                            <div th:case="'Y'">
                                <option value="N">No</option>
                                <option value="Y" selected="selected">Yes</option>
                            </div>
                        </div>
                    </select>
                </div>
                <div class="col-xs-1">
                    Explain Plan:
                </div>
                <div class="col-xs-1">
                    <select id="explainPlan" name="explainPlan" class="form-control">
                        <div th:switch="${explainPlan}">
                            <div th:case="'N'">
                                <option value="N" selected="selected">No</option>
                                <option value="Y">Yes</option>
                            </div>
                            <div th:case="'Y'">
                                <option value="N">No</option>
                                <option value="Y" selected="selected">Yes</option>
                            </div>
                        </div>
                    </select>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-12">
                <span>Run SQL query, DML or DDL into the query window below</span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-12">
                <textarea class="form-control" id="query" style="height: 300px; width: 100%; resize: both" name="query" cols="40" rows="8" th:inline="text">[[${query}]]</textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-12">
                <button type="submit" class="btn btn-primary">
                    <span class="glyphicon glyphicon-play-circle"></span> Execute
                </button>
                <button type="reset" class="btn btn-primary">Reset</button>
            </div>
        </div>
    </form>
</div>

<div th:if="${result != null}">
    <br />
    <div class="col-xs-12">
        <div th:if="${#strings.contains(result.message, 'ERROR:')}">
            <div class="alert alert-danger fade in">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <div>
                    <b>Pivotal MySQL*Web&gt;</b> <span th:text="${result.command}" />
                </div>
                <div>
                    <strong><span th:text="${result.message}" /></strong>
                </div>
            </div>
        </div>
        <div th:if="!${#strings.contains(result.message, 'ERROR:')}">
            <div class="alert alert-success fade in">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <div>
                    <b>Pivotal MySQL*Web&gt;</b> <span th:text="${result.command}" />
                </div>
                <div>
                    <strong>Success!</strong> Command completed successfully
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-xs-12" th:if="${queryResults != null}">
    <div class="bs-example">
        <div class="alert alert-success fade in">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <div>
                <b>Pivotal MySQL*Web&gt;</b> <span th:text="${querysql}" />
            </div>
            <div th:if="${queryResultCount != null}">
                <strong>Success!</strong> Query completed successfully - Total of <span th:text="${queryResultCount}" /> row(s)
            </div>
            <div th:if="${queryResultCount == null}">
                <strong>Success!</strong> Query completed successfully
            </div>
            <div>
                <a th:href="@{/query(query=${querysql},action='export')}">
                    <img src="images/b_save.png"
                         th:src="@{images/b_save.png}"
                         alt="Export Data to CSV"
                         width="16" height="16"
                         border="0"/> <span style="color: black"> Save as CSV</span>
                </a> &nbsp;
                <a th:href="@{/query(query=${querysql},action='export_json')}">
                    <img src="images/b_save.png"
                         th:src="@{images/b_save.png}"
                         alt="Export Data to JSON"
                         width="16" height="16"
                         border="0"/> <span style="color: black"> Save as JSON</span>
                </a> &nbsp;
            </div>
            <div th:if="${elapsedTimeResult != null}">
                Elapsed Time <span th:text="${elapsedTimeResult}" /> second(s)
            </div>
        </div>
    </div>
    <table id="datatable-mysql" class="table table-hover table-bordered table-striped table-condensed">
        <thead>
        <div th:each="columnName : ${queryResults.columnNames}">
            <th style="text-align:center"><span th:text="${columnName}"/></th>
        </div>
        </thead>
        <tbody>
        <div th:each="rows : ${queryResults.rows}">
            <tr>
                <div th:each="columnName : ${queryResults.columnNames}">
                    <td style="text-align:center"><span th:text="${rows.get(columnName)}"/></td>
                </div>
            </tr>
        </div>
        </tbody>
    </table>
    <br />
</div>

<div class="col-xs-12" th:if="${sqlResultMap != null}">
    <h3>SQL Worksheet Results</h3>
    <div class="alert alert-warning fade in">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Note!</strong> Ran <b th:text="${statementsExecuted}"></b> Statement(s)
    </div>
    <div th:each="item : ${sqlResultMap}">
        <div th:if="${#strings.contains(item.key, 'SELECT')}">
            <div class="alert alert-success fade in">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <div>
                    <b>Pivotal MySQL*Web&gt;</b> <span th:text="${item.value[0]}" />
                </div>
                <strong>Success!</strong> Query Completed Successfully
                <div th:if="${item.value[2] != null}">
                    Elapsed Time <span th:text="${item.value[2]}" /> second(s)
                </div>
                <div>
                    <a th:href="@{/query(query=${item.value[0]},action='export')}">
                        <img src="images/b_save.png"
                             th:src="@{images/b_save.png}"
                             alt="Export Data to CSV"
                             width="16" height="16"
                             border="0"/> <span style="color: black">Save as CSV </span>
                    </a> &nbsp;
                    <a th:href="@{/query(query=${item.value[0]},action='export_json')}">
                        <img src="images/b_save.png"
                             th:src="@{images/b_save.png}"
                             alt="Export Data to JSON"
                             width="16" height="16"
                             border="0"/> <span style="color: black">Save as JSON </span>
                    </a> &nbsp;
                </div>
            </div>
            <table class="table table-hover table-bordered table-striped table-condensed">
                <thead>
                    <div th:each="columnName : ${item.value[1].columnNames}">
                        <th style="text-align:center"><span th:text="${columnName}"/></th>
                    </div>
                </thead>
                <tbody>
                <div th:each="rows : ${item.value[1].rows}">
                    <tr>
                        <div th:each="columnName : ${item.value[1].columnNames}">
                            <td style="text-align:center"><span th:text="${rows.get(columnName)}"/></td>
                        </div>
                    </tr>
                </div>
                </tbody>
            </table>
            <br />
        </div>
        <div th:if="!${#strings.contains(item.key, 'SELECT')}">
                <div th:if="${#strings.contains(item.value.message, 'ERROR:')}">
                    <div class="alert alert-danger fade in">
                        <a href="#" class="close" data-dismiss="alert">&times;</a>
                        <div>
                            <b>Pivotal MySQL*Web&gt;</b> <span th:text="${item.value.command}" />
                        </div>
                        <div>
                            <strong><span th:text="${item.value.message}" /></strong>
                        </div>
                    </div>
                </div>
                <div th:if="!${#strings.contains(item.value.message, 'ERROR:')}">
                    <div class="alert alert-success fade in">
                        <a href="#" class="close" data-dismiss="alert">&times;</a>
                        <div>
                            <b>Pivotal MySQL*Web&gt;</b> <span th:text="${item.value.command}" />
                        </div>
                        <div>
                            <strong>Success!</strong> Command completed successfully
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>



<div class="clearfix">
</div>

<div th:include="footer :: copy"></div>

</body>
</html>